<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>router</title>
  </head>
  <body>
    <pre>
          1：路由的本质就是：一种对应的关系   ---------------
          2：后端路由：url地址和后台资源相对应
          3：SPA--（单页面应用程序）
                整个程序，整个项目，看上去只有一个页面
                项目全部使用ajax做局部刷新
            原理：使用HTML'中的锚点，监听到锚点发生改变，页面改变就调用ajax
        
            4：前端路由
                用户触发事件根据事件处理程序用户逻辑
      </pre
    >
    <script>
      //       const Register = {
      //         template: `<div>
      //  <h1>Register 组件</h1>
      //  <hr/>
      //  <router-link to="/register/tab1">Tab1</router-link>
      //  <router-link to="/register/tab2">Tab2</router-link>
      //  <!-- 子路由填充位置 -->
      //  <router-view/>
      //  </div>`,
      //       }

      //       const router = new VueRouter({
      //         routes: [
      //           { path: '/user', component: User },
      //           {
      //             path: '/register',
      //             component: Register,
      //             // 通过 children 属性，为 /register 添加子路由规则
      //             children: [
      //               { path: '/register/tab1', component: Tab1 },
      //               { path: '/register/tab2', component: Tab2 },
      //             ],
      //           },
      //         ],
      //       })

      //       var router = new VueRouter({
      //         routes: [
      //           // 动态路径参数 以冒号开头
      //           { path: '/user/:id', component: User },
      //         ],
      //       })
      //       const User = {
      //         // 路由组件中通过$route.params获取路由参数
      //         template: '<div>User {{ $route.params.id }}</div>',
      //       }

      //   const router = new VueRouter({
      //     routes: [
      //       // 如果 props 被设置为 true，route.params 将会被设置为组件属性
      //       { path: '/user/:id', component: User, props: true },
      //     ],
      //   })
      //   const User = {
      //     props: ['id'], // 使用 props 接收路由参数
      //     template: '<div>用户ID：{{ id }}</div>', // 使用路由参数
      //   }
      //   const router = new VueRouter({
      //     routes: [
      //       // 如果 props 是一个对象，它会被按原样设置为组件属性
      //       {
      //         path: '/user/:id',
      //         component: User,
      //         props: { uname: 'lisi', age: 12 },
      //       },
      //     ],
      //   })
      const User = {
        props: ['uname', 'age'],
        template: `<div>用户信息：{{ uname + '---' + age}}</div>`,
      }
    </script>
  </body>
</html>
